<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">我的队伍</block>
			</cu-custom>
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-blue "></text> {{topCardTitle}}
				</view>
			</view>
			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">位置</view>
							<view class="bpadding-sm margin-xs">ID</view>
							<view class="padding-sm margin-xs">水平</view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<view class="padding-sm margin-xs">操作</view>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-blue light">上</view>
							</view>
							<view class="bpadding-sm margin-xs">打不赢放狗丶</view>
							<view class="padding-sm margin-xs">黄金</view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-blue light">中</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-blue light">野</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-blue light">下</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-blue light">辅</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-red "></text> {{bottomCardTitle}}
				</view>
			</view>
			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">位置</view>
							<view class="bpadding-sm margin-xs">ID</view>
							<view class="padding-sm margin-xs">水平</view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<view class="padding-sm margin-xs">操作</view>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-red light">上</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-red light">中</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-red light">野</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-red light">下</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<view class="flex solid-bottom justify-between">
							<view class="padding-sm margin-xs">
								<view class="cu-tag round bg-red light">辅</view>
							</view>
							<view class="bpadding-sm margin-xs"></view>
							<view class="padding-sm margin-xs"></view>
						</view>
					</view>
					<view class="action">
						<view class="flex solid-bottom justify-center">
							<button class="cu-btn round bg-green shadow">
								{{optionBtnText}}
							</button>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuBorder: true,
				menuArrow: false,
				menuCard: false,
				optionBtnText: '复制',
				topCardTitle: '参战队员',
				bottomCardTitle: '替补队员'
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			}
		}
	}
</script>

<style>
	.page {
		overflow: scroll;
		height: 100Vh;
		width: 100vw;
	}

	
	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
